<template>
    <div class="container">

        <!--查询部分-->
        <!--inline=true水平摆放form表单-->
        <el-form ref="operLogQueryForm" :inline="true" :model="operLogQueryForm">

            <el-form-item prop="name" size="small" label="系统模块">
                <el-input clearable v-model="operLogQueryForm.title" placeholder="请输入系统模块"></el-input>
            </el-form-item>

            <el-form-item prop="name" size="small" label="操作人员">
                <el-input clearable v-model="operLogQueryForm.operName" placeholder="请输入操作人员"></el-input>
            </el-form-item>

            <el-form-item prop="status" size="small" label="操作类型">
                <el-select clearable v-model="operLogQueryForm.operType" placeholder="请选择操作类型">
                    <el-option :key="index" v-for="(item,index) in $dictMap('oper_type')" :label="item.desc"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="status" size="small" label="状态">
                <el-select clearable v-model="operLogQueryForm.status" placeholder="状态">
                    <el-option :key="index" v-for="(item,index) in $dictMap('business_status')" :label="item.desc"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item prop="dateTimePickerValue" size="small" label="操作时间">
                <el-date-picker
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="formatTime"
                        type="datetimerange"
                        v-model="operLogQueryForm.dateTimePickerValue"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"/>
            </el-form-item>

            <el-form-item size="mini">
                <el-button @click="getOperLog" style="width: 80px" type="primary"><i
                        class="iconfont icon-search-line"/><span>查询</span>
                </el-button>
            </el-form-item>

            <el-form-item size="mini">
                <el-button @click="reset" style="width: 80px" type="normal"><i
                        class="iconfont icon-zhongzhi-"/><span>重置</span>
                </el-button>
            </el-form-item>

        </el-form>
        <!--查询部分-->

        <!--菜单列表 列表部分-->
        <el-table
                :header-cell-style="{'text-align':'center',background:'#f8f8f9',color:'#606266'}"
                :cell-style="{'text-align':'center'}"
                :data="operLogs"
                style="width: 100%;margin-bottom: 40px;"
                row-key="id"
                default-expand-all>
            <el-table-column
                    prop="title"
                    label="系统模块">
            </el-table-column>

            <el-table-column
                    prop="operType"
                    label="操作类型">
            </el-table-column>

            <el-table-column
                    prop="requestMethod"
                    label="请求方式">
            </el-table-column>

            <el-table-column
                    prop="operName"
                    label="操作人员">
            </el-table-column>

            <el-table-column
                    prop="operIp"
                    label="主机">
            </el-table-column>


            <el-table-column
                    prop="operAddr"
                    label="操作地点">
            </el-table-column>

            <el-table-column
                    prop="status"
                    label="操作状态">
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    sortable
                    width="250"
                    label="操作时间">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <!--:disabled="authenticate('修改密码')"-->
                    <el-button size="mini" type="primary"
                               @click="showDetail(scope.row)" round>
                        详情
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--详情-->
        <el-dialog title="操作日志详细" :visible.sync="dialogFormVisible">
            <el-form class="myform" :inline="true" :model="detail">
                <el-form-item label="操作模块：">
                    <label>{{detail.title}}/{{detail.operType}}</label>
                </el-form-item>
                <el-form-item label="请求地址：">
                    <label>{{detail.operAddr}}</label>
                </el-form-item>
                <el-form-item label="请求方式：">
                    <label>{{detail.requestMethod}}</label>
                </el-form-item>
                <el-form-item label="操作人类型：">
                    <label>{{detail.operatorType}}</label>
                </el-form-item>
                <el-form-item label="请求url：">
                    <label>{{detail.requestUrl}}</label>
                </el-form-item>
                <el-form-item label="操作方法：">
                    <label>{{detail.method}}</label>
                </el-form-item>

                <el-form-item class="fullWidthFormItem" label="请求参数：">
                    <json-view v-if="detail.operParam" :data="detail.operParam"/>
                    <!--<label >aaa</label>-->
                </el-form-item>

                <el-form-item class="fullWidthFormItem" label="返回数据：">
                    <label v-if="detail.jsonResult  && typeof (detail.jsonResult)==='string'">{{detail.jsonResult}}</label>
                    <json-view v-if="detail.jsonResult  && typeof (detail.jsonResult)==='object'" :data="detail.jsonResult"/>
                </el-form-item>
                <el-form-item v-if="detail.errorMsg" class="fullWidthFormItem" label="错误消息：">
                    <label v-html="detail.errorMsg"></label>
                </el-form-item>
                <el-form-item label="操作状态：">
                    <label>{{detail.status}}</label>
                </el-form-item>
                <el-form-item label="操作时间：">
                    <label>{{detail.createTime}}</label>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import jsonView from 'vue-json-views'
    import {isJsonString} from "../../util/jsonUtils";

    export default {
        name: "OperLog",
        components: {
            jsonView,
        },
        data() {
            return {
                operLogQueryForm: {},
                authenticate(name) {
                    return this.$authenticate(this.$route.path, name)
                },
                //分页参数
                total: 0,
                pageNum: 1,
                pageSize: 10,
                operLogs: [],

                //操作日志详情弹框
                dialogFormVisible: false,

                //操作日志详情
                detail: {}
            }
        },
        created() {
            this.getOperLog()
        },
        methods: {

            showDetail(detail) {
                this.dialogFormVisible = true;
                this.detail = detail
                if (detail.jsonResult && isJsonString(detail.jsonResult)) {
                    this.detail.jsonResult = JSON.parse(detail.jsonResult);
                }
                if (detail.operParam) {
                    this.detail.operParam = JSON.parse(detail.operParam);
                }
                if (this.detail.errorMsg) {
                    let split = detail.errorMsg.split(",");
                    let stringJoin = "";
                    split.forEach(function (str, index) {
                        if (index === split.length - 1) {
                            stringJoin += str;
                        } else {
                            stringJoin += str + "</br>";
                        }
                    });
                    this.detail.errorMsg = stringJoin;
                }
            },

            //分页插件，修改当前页号时触发
            handleCurrentChange(pageNum) {
                this.operLogQueryForm.pageNum = pageNum
                this.operLogQueryForm.pageSize = this.pageSize
                this.getOperLog()
            },

            //分页插件，条数修改时触发
            handleSizeChange(pageSize) {
                this.pageNum = 1;
                this.operLogQueryForm.pageNum = 1
                this.operLogQueryForm.pageSize = pageSize
                this.getOperLog()
            },

            getOperLog() {
                this.$get("oper/getLogs", this.operLogQueryForm).then(({data}) => {
                    this.operLogs = data.list
                    this.total = parseInt(data.total)
                    this.pageSize = parseInt(data.pageSize)
                })
            },

            reset() {
                this.$refs.operLogQueryForm.resetFields()
            },

            formatTime(time) {
                if (time) {
                    this.operLogQueryForm.beginTime = time[0];
                    this.operLogQueryForm.endTime = time[1]
                }
            },
        }
    }
</script>

<style scoped>

    /deep/ .el-form-item__label {
        font-weight: bold;
    }
</style>
